<template>
    <div class="message">
        <!-- 顶部 -->
        <header class="message-header">
            <div class="link-box">
                <router-link to="/home/message/comment" active-class="active">
                    <div class="line"><span>评论</span></div>
                </router-link>
                <router-link to="/home/message/callme" active-class="active">
                    <div class="line"><span>@我</span></div>
                </router-link>
                <router-link to="/home/message/notice" active-class="active">
                    <div class="line"><span>通知</span></div>
                </router-link>
                <router-link to="/home/message/dialogue" active-class="active">
                    <div class="line"><span>对话</span></div>
                </router-link>
            </div>
        </header>

        <main class="main">
            <router-view/>
        </main>

    </div>
</template>

<script>
import HomeHeader from "../components/home-header.vue"
export default {
    name:"Message",
    components:{
        HomeHeader
    }
}
</script>
<style lang="scss" scoped>
@import "../assets/common/base.scss";
.message-header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 30px ; 
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .link-box{
        flex-grow: 1;
        // line-height: 50px;
        display: flex;
        align-items: center;
        a{
            display: block;
            margin: 0 10px;
            color: #555;
            font-size: 15px;
            &.active{
                color: #000;
                font-weight: bold;
                .line{
                    height: 10px;
                    width: 45px;
                    text-align: center;
                    border-bottom: 10px solid $mainCol;
                    position: relative;
                    span{
                        height: 14px;
                        width: 45px;
                        position: absolute;
                        left: 0px;
                        bottom: 0px;
                    }
                }
                
            }
        }
    }
    .header-right{
        svg{
            width: 20px;
            height: 20px;
        }
    }
}

.main{
    position: absolute;
    top: 50px;
    left: 0;
    height: (100%-15);
    width: 100%;
    overflow-y:scroll;
    background-color: $bodyCol;
}
</style>